<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-search"
          size="mini"
          @click="handleSearch"
          >搜索</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['putStorage:putStorageAdd:add']"
        >
          新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-check"
          size="mini"
          @click="handlePut"
          :disabled="(tjFalg = type1 || mxDate)"
          v-hasPermi="['putStorage:putStorageAdd:submit']"
        >
          提交
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="type1"
          @click="handleUpdate"
          v-hasPermi="['putStorage:putStorageAdd:edit']"
        >
          修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          size="mini"
          :disabled="type2"
          @click="check_back = true"
          v-hasPermi="['putStorage:putStorageAdd:edit']"
        >
          撤回
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="type1"
          @click="handleDelete"
          v-hasPermi="['putStorage:putStorageAdd:remove']"
        >
          删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          :loading="exportLoading"
          @click="handleDc('#exportPutStorage', '来料入库单据')"
          v-hasPermi="['putStorage:putStorageAdd:export']"
        >
          Excel
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          :loading="exportLoading"
          @click="handleDetailExport('#rwdDetail', '来料进货入库-明细信息')"
          v-hasPermi="['putStorage:putStorageAdd:export']"
        >
          入库明细
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          :loading="exportLoading"
          @click="handleTotalExport('#rwdTotal', '来料进货入库-统计信息')"
          v-hasPermi="['putStorage:putStorageAdd:export']"
        >
          入库统计
        </el-button>
      </el-col>
      <Tag type="dot" size="default" color="#0fac09">提交</Tag>
      <Tag type="dot" size="default" color="#bb0331">通过</Tag>
      <Tag type="dot" size="default" color="#0323af">检验</Tag>
      <Tag type="dot" size="default" color="#F42BA2">拒收</Tag>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      @scrollBottom="load"
      highlight-current-row
      border
      stripe
      v-loading="loading"
      :height="tableH"
      :data="rwmMstrList"
      :cell-style="iCellStyle"
      @row-click="clickRwm"
      id="exportPutStorage"
      :header-cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column label="#" type="index" width="40" align="center" />
      <el-table-column
        label="入库单号"
        :show-overflow-tooltip="true"
        align="center"
        width="135"
        prop="rwmDjbh"
      />
      <el-table-column
        label="入库日期"
        :show-overflow-tooltip="true"
        align="center"
        prop="rwmRkrq"
        width="100"
      >
        <template #default="scope">
          <span>{{ parseTime(scope.row.rwmRkrq, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="入库类型"
        :show-overflow-tooltip="true"
        width="100"
        align="center"
        prop="rwmType"
      >
        <template #default="scope">
          <dict-tag :options="psTypeOptions" :value="scope.row.rwmType" />
        </template>
      </el-table-column>
      <el-table-column
        label="入库仓库"
        :show-overflow-tooltip="true"
        width="130"
        align="center"
        prop="rwmCkdm"
      >
        <template #default="scope">
          <dict-tag :options="allStorageOptions" :value="scope.row.rwmCkdm" />
        </template>
      </el-table-column>
      <el-table-column
        label="供应商"
        :show-overflow-tooltip="true"
        width="140"
        align="center"
        prop="rwmCsdm"
      >
        <template #default="scope">
          <dict-tag :options="allCsOptions" :value="scope.row.rwmCsdm" />
        </template>
      </el-table-column>
      <el-table-column
        label="开单人员"
        :show-overflow-tooltip="true"
        width="100"
        align="center"
        prop="rwmJlry"
      />
      <el-table-column
        label="收货单号"
        :show-overflow-tooltip="true"
        width="140"
        align="center"
        prop="rwmShdh"
      />
      <el-table-column
        label="检验结果"
        :show-overflow-tooltip="true"
        width="140"
        align="center"
        prop="rwmJyjg"
      >
        <template #default="scope">
          <dict-tag :options="jyjgDict" :value="scope.row.rwmJyjg" />
        </template>
      </el-table-column>
      <el-table-column
        label="备注"
        :show-overflow-tooltip="true"
        width="140"
        prop="rwmDesc"
      />
      <el-table-column
        label="开单日期"
        :show-overflow-tooltip="true"
        width="100"
        align="center"
        prop="rwmJlrq"
      />
      <el-table-column
        label="检验人员"
        :show-overflow-tooltip="true"
        width="100"
        align="center"
        prop="rwmJyry"
      />
      <el-table-column
        label="检验日期"
        :show-overflow-tooltip="true"
        align="center"
        prop="rwmJyrq"
        width="180"
      >
        <template #default="scope">
          <span>{{ parseTime(scope.row.rwmJyrq, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="过账人员"
        :show-overflow-tooltip="true"
        width="100"
        align="center"
        prop="rwmGzry"
      />
      <el-table-column
        label="过账日期"
        :show-overflow-tooltip="true"
        align="center"
        prop="rwmGzrq"
        width="180"
      >
        <template #default="scope">
          <span>{{ parseTime(scope.row.rwmGzrq, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        fixed="right"
        width="60"
        class-name="small-padding fixed-width"
      >
        <template #default="scope">
          <el-button
            size="mini"
            type="text"
            :disabled="scope.row.rwmTjflag != 0"
            @click="handleAddFull(scope.row)"
            v-hasPermi="['putStorage:putStorageAdd:addCg']"
          >
            添加
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--子表Tab-->
    <el-tabs v-model="activeTab">
      <el-tab-pane label="入库明细" name="first">
        <el-table
          border
          stripe
          :height="tableHChild"
          :data="rwdDetList"
          id="rwdDetail"
          :header-cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column
            label="#"
            type="index"
            width="40"
            align="center"
            fixed="left"
          />
          <el-table-column
            label="客户编号"
            width="135"
            align="center"
            prop="itmCustwldm"
            fixed="left"
          />
          <el-table-column
            label="来源单号"
            width="135"
            align="center"
            prop="rwdCgdh"
          />
          <el-table-column
            label="物料代码"
            width="135"
            align="center"
            prop="rwdWldm"
          />
          <el-table-column label="规格描述" width="335" prop="itmPmgg" />
          <el-table-column
            label="单价"
            :show-overflow-tooltip="true"
            align="center"
            prop="rwdMoney"
          />
          <el-table-column
            label="单位"
            :show-overflow-tooltip="true"
            width="60"
            align="center"
            prop="itmDw"
          >
            <template #default="scope">
              <dict-tag :options="unitFlagOptions" :value="scope.row.itmDw" />
            </template>
          </el-table-column>
          <!--          allCwOptions-->
          <el-table-column
            label="存放位置"
            width="135"
            align="center"
            prop="rwdCwdm"
          >
            <template #default="scope">
              <dict-tag :options="allCwOptions" :value="scope.row.rwdCwdm" />
            </template>
          </el-table-column>
          <el-table-column
            label="最小包装"
            width="80"
            align="center"
            prop="itmMinbz"
          />
          <el-table-column
            label="包装数量"
            width="80"
            align="center"
            prop="rwdBzsl"
          />
          <el-table-column
            label="申请数量"
            width="80"
            align="center"
            prop="rwdSqsl"
          />
          <el-table-column
            label="允收数量"
            width="80"
            align="center"
            prop="rwdOksl"
          />
          <el-table-column
            label="拒收数量"
            width="80"
            align="center"
            prop="rwdNgsl"
          />
          <el-table-column
            label="入库数量"
            width="80"
            align="center"
            prop="rwdRksl"
          />
          <el-table-column
            label="检验结果"
            width="80"
            align="center"
            prop="rwdJyjg"
          />
          <el-table-column
            label="结果描述"
            width="120"
            align="center"
            prop="rwdJydecs"
          />
          <el-table-column
            label="检验人员"
            width="80"
            :show-overflow-tooltip="true"
            align="center"
            prop="rwdJyry"
          />
          <el-table-column
            label="检验日期"
            :show-overflow-tooltip="true"
            align="center"
            prop="rwdJyrq"
            width="150"
          >
            <template #default="scope">
              <span>{{ parseTime(scope.row.rwdJyrq, "{y}-{m}-{d}") }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="入库人员"
            :show-overflow-tooltip="true"
            width="100"
            align="center"
            prop="rwdRkry"
          />
          <el-table-column
            label="入库日期"
            :show-overflow-tooltip="true"
            align="center"
            prop="rwdRkrq"
            width="150"
          >
            <template #default="scope">
              <span>{{ parseTime(scope.row.rwdRkrq, "{y}-{m}-{d}") }}</span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
            width="100"
            class-name="small-padding fixed-width"
          >
            <template #default="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleResult2(scope.row)"
                :disabled="type1"
                v-hasPermi="['purchase:qgmMstr:remove']"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="入库统计" name="second">
        <el-table
          border
          stripe
          :height="tableHChild"
          :data="rwdDetTotal"
          id="rwdTotal"
        >
          <el-table-column label="#" width="40" align="center" />
          <el-table-column
            label="客户编号"
            show-overflow-tooltip
            align="center"
            prop="itmCustwldm"
          />
          <el-table-column
            label="物料代码"
            show-overflow-tooltip
            align="center"
            prop="rwdWldm"
          />
          <el-table-column
            label="规格描述"
            show-overflow-tooltip
            align="center"
            prop="itmPmgg"
          />
          <el-table-column
            label="单位"
            :show-overflow-tooltip="true"
            width="60"
            align="center"
            prop="itmDw"
          >
            <template #default="scope">
              <dict-tag :options="unitFlagOptions" :value="scope.row.itmDw" />
            </template>
          </el-table-column>
          <el-table-column label="最小包装" align="center" prop="itmMinbz" />
          <el-table-column label="包装数量" align="center" prop="rwdBzsl" />
          <el-table-column label="申请数量" align="center" prop="rwdSqsl" />
          <el-table-column label="允收数量" align="center" prop="rwdOksl" />
          <el-table-column label="拒收数量" align="center" prop="rwdNgsl" />
          <el-table-column label="入库数量" align="center" prop="rwdRksl" />
          <el-table-column label="操作" align="center" width="100">
            <template #default="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleDel(scope.row)"
                v-hasPermi="['putStorage:putStorageAdd:remove']"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <!-- 添加子项对话框   -->
    <el-dialog
      v-model="openChildren"
      :fullscreen="true"
      :close-on-click-modal="false"
      append-to-body
    >
      <!-- 子项搜索条件框-->
      <el-form :model="queryChildParams" :inline="true">
        <el-row>
          <el-col :span="6" v-show="addDate">
            <el-form-item label="对应单号" prop="cgDjbh">
              <el-input
                v-model="queryChildParams.cgDjbh"
                placeholder="请输入对应单号"
                clearable
                size="small"
                @keyup.enter.native="serachChildrened"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="物料代码" prop="itmWldm">
              <el-input
                v-model="queryChildParams.itmWldm"
                placeholder="请输入物料代码"
                clearable
                size="small"
                @keyup.enter.native="serachChildrened"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="规则描述" prop="itmPmgg">
              <el-input
                v-model="queryChildParams.itmPmgg"
                placeholder="请输入规则描述"
                clearable
                size="small"
                @keyup.enter.native="serachChildrened"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5" v-show="rowData.rwmType === 'RK05'">
            <el-form-item label="查询规则" prop="itmPmgg">
              <el-select v-model="queryChildParams.plan" placeholder="请选择">
                <el-option
                  v-for="item in planOptions"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item style="display: flex; justify-content: flex-end">
              <el-button type="primary" @click="serachChildrened"
                >查询</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!--子项数据框-->
      <!--      @row-click="clickdel"-->
      <el-form>
        <el-table
          highlight-current-row
          v-loading="loading"
          :data="serachAddList"
          border
          stripe
          :height="tableHData"
          ref="somCheckTable"
          @scrollBottom="load2"
          :default-sort="{ prop: 'itmCustomerCode', order: 'descending' }"
          :header-cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column
            label="#"
            min-width="5%"
            type="index"
            align="center"
          />
          <el-table-column
            label="客户编号"
            min-width="12%"
            :show-overflow-tooltip="true"
            align="center"
            prop="itmCustomerCode"
            sortable
          />
          <el-table-column
            label="物料代码"
            min-width="20%"
            :show-overflow-tooltip="true"
            align="center"
            prop="itmWldm"
            sortable
          />
          <el-table-column
            label="来源单号"
            min-width="20%"
            :show-overflow-tooltip="true"
            align="center"
            prop="cgDjbh"
            sortable
          />
          <el-table-column
            label="品名规格"
            min-width="30%"
            :show-overflow-tooltip="true"
            prop="itmPmgg"
            sortable
          />
          <el-table-column
            label="单位"
            min-width="10%"
            :show-overflow-tooltip="true"
            align="center"
            prop="itmDw"
          >
            <template #default="scope">
              <dict-tag :options="unitFlagOptions" :value="scope.row.itmDw" />
            </template>
          </el-table-column>
          <el-table-column
            label="存放位置"
            min-width="12%"
            align="center"
            prop="itmLocation"
          >
            <template #default="scope">
              <dict-tag
                :options="allCwOptions"
                :value="scope.row.itmLocation"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="最小包装"
            min-width="10%"
            :show-overflow-tooltip="true"
            align="center"
            prop="minPackage"
          />
          <el-table-column
            label="采购数量"
            min-width="10%"
            :show-overflow-tooltip="true"
            v-if="addDate"
            align="center"
            prop="cgNumber"
          />
          <el-table-column
            label="已申请数"
            min-width="10%"
            :show-overflow-tooltip="true"
            align="center"
            prop="cgSqNumber"
          />
          <el-table-column
            label="待申请数"
            min-width="10%"
            :show-overflow-tooltip="true"
            v-if="addDate"
            align="center"
            prop="noCgSqNumber"
          />
          <el-table-column
            label="单价"
            min-width="10%"
            :show-overflow-tooltip="true"
            align="center"
            prop="rwdMoney"
          >
            <template #default="scope">
              <el-input
                class="inputName"
                type="number"
                v-model="scope.row.rwdMoney"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="需申请数"
            min-width="15%"
            :show-overflow-tooltip="true"
            prop="cgNeedSqNumber"
            align="center"
          >
            <template #default="scope">
              <el-input
                class="inputName"
                type="number"
                @input="changValue(scope.row)"
                v-model="scope.row.cgNeedSqNumber"
              ></el-input>
            </template>
          </el-table-column>
        </el-table>

        <el-tabs v-model="activeTab">
          <el-tab-pane label="入库明细" name="first">
            <el-table border stripe :height="tableHChild" :data="rwdDetList">
              <el-table-column
                label="#"
                width="40"
                align="center"
                fixed="left"
              />
              <el-table-column
                label="客户编号"
                width="135"
                align="center"
                prop="itmCustwldm"
                fixed="left"
              />
              <el-table-column
                label="来源单号"
                width="135"
                align="cetrt"
                prop="rwdCgdh"
              />
              <el-table-column
                label="物料代码"
                width="135"
                align="center"
                prop="rwdWldm"
              />
              <el-table-column label="规格描述" width="335" prop="itmPmgg" />
              <el-table-column
                label="单价"
                width="60"
                :show-overflow-tooltip="true"
                align="center"
                prop="rwdMoney"
              />
              <el-table-column
                label="单位"
                :show-overflow-tooltip="true"
                width="60"
                align="center"
                prop="itmDw"
              >
                <template #default="scope">
                  <dict-tag
                    :options="unitFlagOptions"
                    :value="scope.row.itmDw"
                  />
                </template>
              </el-table-column>
              <el-table-column
                label="存放位置"
                width="135"
                align="center"
                prop="rwdCwdm"
              >
                <template #default="scope">
                  <dict-tag
                    :options="allCwOptions"
                    :value="scope.row.rwdCwdm"
                  />
                </template>
              </el-table-column>
              <el-table-column
                label="最小包装"
                width="80"
                align="center"
                prop="itmMinbz"
              />
              <el-table-column
                label="包装数量"
                width="80"
                align="center"
                prop="rwdBzsl"
              />
              <el-table-column
                label="申请数量"
                width="80"
                align="center"
                prop="rwdSqsl"
              />
              <el-table-column
                label="允收数量"
                width="80"
                align="center"
                prop="rwdOksl"
              />
              <el-table-column
                label="拒收数量"
                width="80"
                align="center"
                prop="rwdNgsl"
              />
              <el-table-column
                label="入库数量"
                width="80"
                align="center"
                prop="rwdRksl"
              />
              <el-table-column
                label="检验结果"
                width="80"
                align="center"
                prop="rwdJyjg"
              />
              <el-table-column
                label="结果描述"
                width="100"
                align="center"
                prop="rwdJydecs"
              />
              <el-table-column
                label="检验人员"
                width="80"
                :show-overflow-tooltip="true"
                align="center"
                prop="rwdJyry"
              />
              <el-table-column
                label="检验日期"
                :show-overflow-tooltip="true"
                align="center"
                prop="rwdJyrq"
                width="150"
              >
                <template #default="scope">
                  <span>{{ parseTime(scope.row.rwdJyrq, "{y}-{m}-{d}") }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="入库人员"
                :show-overflow-tooltip="true"
                width="100"
                align="center"
                prop="rwdRkry"
              />
              <el-table-column
                label="入库日期"
                :show-overflow-tooltip="true"
                align="center"
                prop="rwdRkrq"
                width="150"
              >
                <template #default="scope">
                  <span>{{ parseTime(scope.row.rwdRkrq, "{y}-{m}-{d}") }}</span>
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                align="center"
                width="60"
                class-name="small-padding fixed-width"
              >
                <template #default="scope">
                  <el-button
                    size="mini"
                    type="text"
                    @click="handleResult(scope.row)"
                    v-hasPermi="['putStorage:putStorageAdd:deleteRwd']"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="入库统计" name="second">
            <el-table border stripe :height="tableHChild" :data="rwdDetTotal">
              <el-table-column
                label="#"
                width="40"
                type="index"
                align="center"
              />
              <el-table-column
                label="客户编号"
                align="center"
                prop="itmCustwldm"
              />
              <el-table-column label="物料代码" align="center" prop="rwdWldm" />
              <el-table-column label="规格描述" align="center" prop="itmPmgg" />
              <el-table-column
                label="单位"
                :show-overflow-tooltip="true"
                width="60"
                align="center"
                prop="itmDw"
              >
                <template #default="scope">
                  <dict-tag
                    :options="unitFlagOptions"
                    :value="scope.row.itmDw"
                  />
                </template>
              </el-table-column>
              <el-table-column
                label="最小包装"
                align="center"
                prop="itmMinbz"
              />
              <el-table-column label="包装数量" align="center" prop="rwdBzsl" />
              <el-table-column label="申请数量" align="center" prop="rwdSqsl" />
              <el-table-column label="允收数量" align="center" prop="rwdOksl" />
              <el-table-column label="拒收数量" align="center" prop="rwdNgsl" />
              <el-table-column label="入库数量" align="center" prop="rwdRksl" />
            </el-table>
          </el-tab-pane>
        </el-tabs>

        <el-form-item
          style="margin-top: 25px; display: flex; justify-content: flex-end"
        >
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="handAddChildren">确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 查询对话框   -->
    <el-dialog
      :title="title"
      v-model="openSearch"
      :close-on-click-modal="false"
      draggable
      width="750px"
      append-to-body
    >
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        v-show="showSearch"
        label-width="68px"
      >
        <el-col :span="12">
          <el-form-item label="开单日期">
            <el-date-picker
              v-model="daterangeRwmJlrq"
              size="small"
              style="width: 240px"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              :default-time="['00:00:00', '23:59:59']"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="入库单号" prop="rwmDjbh">
            <el-input
              v-model="queryParams.rwmDjbh"
              placeholder="请输入入库单号"
              clearable
              style="width: 240px"
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="厂商代码" prop="rwmCsdm">
            <el-select
              v-model="queryParams.rwmCsdm"
              style="width: 240px"
              clearable
              filterable
              placeholder="请选择厂商代码"
            >
              <el-option
                v-for="item in csOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="入库仓库" prop="rwmCkdm">
            <el-select
              v-model="queryParams.rwmCkdm"
              style="width: 240px"
              clearable
              filterable
              placeholder="请选择仓库"
            >
              <el-option
                v-for="item in storageOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="综合查询" prop="totalOrder">
            <el-input
              type="textarea"
              v-model="totalOrder"
              clearable
              style="width: 600px"
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>
        <br />
        <el-col :span="12">
          <el-form-item prop="rwmZtbz" label="检验状态">
            <el-radio-group v-model="queryParams.rwmZtbz">
              <el-radio
                v-for="dict in RwmZtbzOptions"
                :key="dict.dictValue"
                :label="dict.dictValue"
                >{{ dict.dictLabel }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="rwmJyjg" label="检验结果">
            <el-select
              style="width: 240px"
              v-model="queryParams.rwmJyjg"
              placeholder="请选择入库类型"
              clearable
            >
              <el-option
                v-for="dict in jyjgDict"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            style="margin-top: 25px; display: flex; justify-content: flex-end"
          >
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="handleQuery">确认</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-dialog>

    <!-- 添加或修改来料进货入库开单对话框 -->
    <el-dialog
      :title="title"
      v-model="open"
      :close-on-click-modal="false"
      draggable
      width="860px"
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="78px">
        <el-col :span="12">
          <el-form-item label="入库单号" prop="rwmDjbh">
            <el-input style="width: 240px" v-model="form.rwmDjbh" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="入库日期" prop="rwmRkrq">
            <el-date-picker
              clearable
              size="small"
              v-model="form.rwmRkrq"
              type="date"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              placeholder="选择入库日期"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="收货单号" prop="rwmShdh">
            <el-input
              style="width: 240px"
              v-model="form.rwmShdh"
              placeholder="请输入收货单号"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="入库类型" prop="rwmType">
            <el-select
              style="width: 240px"
              v-model="form.rwmType"
              @change="handleTypeChange"
              placeholder="请选择入库类型"
              :disabled="updateView"
            >
              <el-option
                v-for="dict in psTypeOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="厂商代码" prop="rwmCsdm">
            <el-select
              v-model="form.rwmCsdm"
              style="width: 240px"
              filterable
              placeholder="请选择厂商代码"
            >
              <el-option
                v-for="item in csOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="入库仓库" prop="rwmCkdm">
            <el-select
              style="width: 240px"
              v-model="form.rwmCkdm"
              placeholder="请选择入库仓库"
              :disabled="updateView || disabledCkdm"
            >
              <el-option
                v-for="item in storageOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="入库备注" prop="rwmDesc">
            <el-input
              v-model="form.rwmDesc"
              style="width: 536px"
              placeholder="请输入入库备注"
            />
          </el-form-item>
        </el-col>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 撤回开单对话框 -->
    <Modal v-model="check_back" draggable scrollable width="300">
      <p slot="header" style="color: #f60; text-align: center">
        <Icon type="ios-information-circle"></Icon>
        <span>确认撤回至开单？</span>
      </p>
      <div style="text-align: center">
        <p>撤回理由</p>
        <Input v-model="backRwmDesc" style="width: 75%" />
      </div>
      <div slot="footer">
        <Button type="error" size="large" long @click="handleBack">撤回</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import {
  listPutStorageAdd,
  getPutStorageAdd,
  delPutStorageAdd,
  addPutStorageAdd,
  updatePutStorageAdd,
  listPutStorageAdds,
  getCs,
  addRkmx,
  delRwdDeted,
  submitPomPod,
  addRkmxThree,
  addRkmxTwo,
  getAllCs,
  addRkmxFive,
} from "@/api/putStorage/putStorageAdd";
import { getPstorageType } from "@/api/repertory/putstorage";
import { getAll, getstorageType } from "@/api/repertory/Storage";
import { listRwdDet, deleteByDjbhAndWldm } from "@/api/putStorage/RwdDet";
import { exportTable } from "@/utils/ruoyi";

export default {
  name: "PutStorageAdd",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      serachChildren: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      tableH: (document.body.clientHeight - 130) / 2,
      tableHData: (document.body.clientHeight - 270) / 2,
      tableHChild: (document.body.clientHeight - 280) / 2,
      single: true,
      activeTab: "first",
      // 非多个禁用
      multiple: true,
      rwdDetList: [],
      rwdDetTotal: [],
      // 显示搜索条件
      showSearch: true,
      openSearch: false,
      openChildren: false,
      // 总条数
      total: 0,
      total2: 0,
      // 来料进货入库开单表格数据
      rwmMstrList: [],

      //入库类型
      psTypeOptions: [],

      //存储厂商
      csOptions: [],

      allCsOptions: [],

      //有效存储仓库
      storageOptions: [],
      planOptions: [
        {
          dictLabel: "计划入库",
          dictValue: "Y",
          listClass: "default",
        },
        {
          dictLabel: "非计划入库",
          dictValue: "N",
          listClass: "default",
        },
      ],
      //检验结果字典
      jyjgDict: [
        {
          dictLabel: "允收",
          dictValue: "OK",
          listClass: "default",
        },
        {
          dictLabel: "拒收",
          dictValue: "NG",
          listClass: "default",
        },
        {
          dictLabel: "特采",
          dictValue: "TC",
          listClass: "default",
        },
      ],

      //所以存储仓库
      allStorageOptions: [],

      //有效存储储位
      cWOptions: [],

      //所有存储储位
      allCwOptions: [],

      //请求状态
      RwmZtbzOptions: [
        {
          dictLabel: "未检验",
          dictValue: "1",
        },
        {
          dictLabel: "已检验",
          dictValue: "2",
        },
        {
          dictLabel: "全部",

          dictValue: "",
        },
      ],
      // //检验结果字典
      // jyjgOptions: [
      //
      //   {
      //
      //     dictLabel: '特采',
      //     dictValue: 'TC'
      //
      //   },
      //   {
      //
      //     dictLabel: '允收',
      //     dictValue: 'OK'
      //   }
      //   ,
      //   {
      //
      //     dictLabel: '拒收',
      //     dictValue: 'NG'
      //
      //   }
      // ],
      // 弹出层标题
      title: "",
      addDate: true,
      check_back: false,
      backRwmDesc: "",
      // 是否显示弹出层
      open: false,
      updateView: false,
      mxDate: true,
      tjFalg: false,
      // 建立日期时间范围
      daterangeRwmJlrq: [
        this.$moment().subtract(2, "month").startOf("month").toDate(),
        this.$moment().endOf("month").toDate(),
      ],
      totalOrder: null,
      rkmxList: [],
      rktjList: [],
      qgmxList: [],
      rowData: {
        rwmDjbh: "",
      },
      qgdDetCountList: [],
      serachAddList: [],
      unitFlagOptions: [],
      selectioned: [],
      type1: true,
      type2: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        rwmDjbh: null,
        rwmCsdm: null,
        rwmZtbz: "1",
        rwmJlry: null,
        rwmJyjg: null,
      },
      // 查询子项参数
      queryChildParams: {
        pageNum: 1,
        pageSize: 20,
        //销售单号
        cgDjbh: null,
        //
        cglCsdm: null,
        //
        rkDjbh: null,
        itmWldm: null,
        //
        itmCkdm: null,
        itmPmgg: null,
        rkType: null,
        plan: "Y",
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        rwmRkrq: [
          { required: true, message: "入库日期不能为空", trigger: "blur" },
        ],
        rwmType: [
          { required: true, message: "入库类型不能为空", trigger: "blur" },
        ],
        rwmCsdm: [
          { required: true, message: "厂商代码不能为空", trigger: "blur" },
        ],
        rwmCkdm: [
          { required: true, message: "入库仓库不能为空", trigger: "blur" },
        ],
      },
      //日期初始化
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      disabledCkdm: false,
    };
  },
  created() {
    this.getList();
    //入库类型字典
    getPstorageType(0).then((response) => {
      this.psTypeOptions = response.data;
      for (let i of this.psTypeOptions) {
        i.listClass = "default";
      }
    });
    //单位
    this.getDicts("sys_unit").then((response) => {
      this.unitFlagOptions = response.data;
    });
    //存放位置
    getstorageType("0").then((response) => {
      this.cWOptions = response.data;

      for (let item of this.cWOptions) {
        item.dictLabel = item.storageDefaultstorage;
        item.listClass = "default";
        item.dictValue = item.storageId + "";
      }
    });

    getstorageType("0").then((response) => {
      this.storageOptions = response.data;

      for (let item of this.storageOptions) {
        item.dictLabel = item.storageName;
        item.listClass = "default";
        item.dictValue = item.storageId + "";
      }
    });

    getAll().then((response) => {
      this.allCwOptions = response.data;

      for (let item2 of this.allCwOptions) {
        item2.dictLabel = item2.storageDefaultstorage;

        item2.listClass = "default";
        item2.dictValue = item2.storageId + "";
      }
    });

    getAll().then((response) => {
      this.allStorageOptions = response.data;

      for (let item of this.allStorageOptions) {
        item.dictLabel = item.storageName;
        item.listClass = "default";
        item.dictValue = item.storageId + "";
      }
    });

    getCs().then((response) => {
      this.csOptions = response.data.filter((item) => item.csmPutFlag != "1");
      for (let item of this.csOptions) {
        item.dictLabel = item.csmCs;
        item.listClass = "default";
        item.dictValue = item.csmCsdm;
      }
    });

    getAllCs().then((response) => {
      this.allCsOptions = response.data;
      for (let item of this.allCsOptions) {
        item.dictLabel = item.csmCs;
        item.listClass = "default";
        item.dictValue = item.csmCsdm;
      }
    });
  },
  methods: {
    /** 查询来料进货入库开单列表 */
    getList(row) {
      this.loading = true;
      this.queryParams.params = {};
      if (null != this.daterangeRwmJlrq && "" != this.daterangeRwmJlrq) {
        // this.queryParams.params['beginRwmJlrq'] = this.daterangeRwmJlrq[0]
        // this.queryParams.params['endRwmJlrq'] = this.daterangeRwmJlrq[1]
        this.queryParams.params["beginRwmJlrq"] = this.moment(
          this.daterangeRwmJlrq[0]
        ).format("YYYY-MM-DD HH:mm:ss");
        this.queryParams.params["endRwmJlrq"] = this.moment(
          this.daterangeRwmJlrq[1]
        ).format("YYYY-MM-DD HH:mm:ss");
      }
      if (null != this.totalOrder && "" != this.totalOrder) {
        this.queryParams.params["totalOrder"] = this.totalOrder;
      }
      listPutStorageAdd(this.queryParams).then((response) => {
        this.rwmMstrList = [];
        this.rwdDetList = [];
        this.rwdDetTotal = [];
        this.rwmMstrList = this.rwmMstrList.concat(response.rows);
        this.total = response.total;
        this.loading = false;
        if (row != null) {
          this.clickRwm(row);
        } else if (this.rwmMstrList.length > 0) {
          this.clickRwm(this.rwmMstrList[0]);
        }
      });
    },
    changValue(row) {
      if (this.addDate) {
        if (
          ["RK01", "RK02", "RK05", "RK08"].includes(
            this.queryChildParams.rkType
          )
        ) {
          if (
            this.queryChildParams.rkType === "RK05" &&
            this.queryChildParams.plan === "N"
          ) {
            return;
          }
          if (row.cgNeedSqNumber > row.noCgSqNumber) {
            this.msgError("不允许超过待申请数");
            row.cgNeedSqNumber = row.noCgSqNumber;
          }
        }
      }
    },
    handleTypeChange(type) {
      if (type == "RK02") {
        this.form.rwmCsdm = "HD000";
        this.form.rwmCkdm = "9";
      } else if (type == "RK01") {
        this.form.rwmCsdm = "";
        this.form.rwmCkdm = "7";
      }
      if (this.$store.state.settings.sysName.indexOf("荆州") > -1) return;
      if (type === "RK99") {
        this.form.rwmCkdm = "10";
        this.disabledCkdm = true;
      } else {
        this.disabledCkdm = false;
      }
    },
    handleResult(row) {
      this.$confirm("是否确认删除该明细数据吗?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delRwdDeted(row.rwdId);
        })
        .then(() => {
          this.rwmMstrList = [];
          this.queryParams.pageNum = 1;
          this.getList(this.rowData);
          if (this.openChildren) {
            this.serachChildrened();
          }
          this.msgSuccess("删除成功");
        })
        .catch(() => {});
    },

    handleResult2(row) {
      this.$confirm("是否确认删除该明细数据吗?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delRwdDeted(row.rwdId);
        })
        .then(() => {
          this.getRwdDetList(row.rwdDjbh);
          this.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    clickRwm(row) {
      //获得选中的详细数据
      this.rowData = row;
      //获得当前单据的状态
      this.ids = row.rwmId;
      this.type1 = !(row != null && row.rwmZtbz == "1" && row.rwmTjflag == "0");
      this.type2 = !(
        row != null &&
        row.rwmZtbz !== "6" &&
        row.rwmTjflag == "1"
      );
      if (row != null) {
        this.rwmZtbzc = row.rwmZtbz;
      }
      //获得选中的详细数据
      this.getRwdDetList(row.rwmDjbh);
    },
    /** 获取RwdDet 数据*/
    getRwdDetList(rwdDjbh) {
      this.rwdDetList = [];
      this.rwdDetTotal = [];
      if (rwdDjbh != null && rwdDjbh != "") {
        const query = { rwdDjbh: rwdDjbh };
        listRwdDet(query).then((response) => {
          this.rwdDetList = response.data.detail;
          this.rwdDetTotal = response.data.total;
          this.mxDate = this.rwdDetList.length > 0 ? false : true;
        });
      }
    },
    /** 查询子项 */
    serachChildrened() {
      this.queryChildParams.pageNum = 1;
      listPutStorageAdds(this.queryChildParams).then((response) => {
        this.serachAddList = [];
        this.serachAddList = this.serachAddList.concat(response.rows);
        this.total2 = response.total;
      });
      this.getRwdDetList(this.rowData.rwmDjbh);
    },
    load2() {
      if (
        this.queryChildParams.pageNum <
        Math.ceil(this.total2 / this.queryChildParams.pageSize)
      ) {
        this.queryChildParams.pageSize = 20;
        this.queryChildParams.pageNum++;
        listPutStorageAdds(this.queryChildParams).then((response) => {
          this.serachAddList = this.serachAddList.concat(response.rows);
          this.total2 = response.total;
        });
      }
      return 0;
    },
    //load
    load() {
      if (
        this.queryParams.pageNum <
        Math.ceil(this.total / this.queryParams.pageSize)
      ) {
        this.queryParams.pageSize = 20;
        this.queryParams.pageNum++;
        listPutStorageAdd(this.queryParams).then((response) => {
          this.rwmMstrList = this.rwmMstrList.concat(response.rows);
          this.total = response.total;
          this.loading = false;
          if (row != null) {
            this.clickRwm(row);
          } else if (this.rwmMstrList != null && this.rwmMstrList.length > 0) {
            this.clickRwm(this.rwmMstrList[0]);
          }
        });
      }
      return 0;
    },
    handleAddFull(row) {
      this.openChildren = true;
      if (
        row.rwmType == "RK03" ||
        row.rwmType == "RK06" ||
        row.rwmType == "RK99"
      ) {
        this.addDate = false;
      } else {
        this.addDate = true;
      }
      this.queryChildParams.rkDjbh = row.rwmDjbh;
      this.queryChildParams.itmCkdm = row.rwmCkdm;
      this.queryChildParams.cglCsdm = row.rwmCsdm;
      this.queryChildParams.rkType = row.rwmType;
      this.queryChildParams.plan = "Y";
      this.serachChildrened();
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.openSearch = false;
      this.openChildren = false;
      this.reset();
    },
    /** 颜色事件 */
    iCellStyle: function ({ row, column, rowIndex, columnIndex }) {
      //提交
      if (row.rwmZtbz == "1" && row.rwmTjflag == "1") {
        return "padding:0px 0;color:#0fac09";
      }
      //通过
      else if (row.rwmZtbz == "2" && row.rwmTjflag == "1") {
        return "padding:0px 0;color:#0323af";
      }
      //拒收
      else if (
        row.rwmZtbz == "6" &&
        row.rwmTjflag == "1" &&
        row.rwmJyjg == "NG"
      ) {
        return "padding:0px 0;color:#F42BA2";
      }
      //检验
      else if (row.rwmZtbz == "6" && row.rwmTjflag == "1") {
        return "padding:0px 0;color:#bb0331";
      }
    },
    handAddChildren() {
      const datas = this.serachAddList.filter((a) => {
        return !!a.cgNeedSqNumber && a.cgNeedSqNumber != "0";
      });
      //1.如果是零星或者生产
      if (
        this.rowData.rwmType == "RK01" ||
        this.rowData.rwmType == "RK02" ||
        this.rowData.rwmType == "RK08" ||
        this.rowData.rwmType == "RK05"
      ) {
        addRkmx(datas).then((response) => {
          this.serachChildrened();
        });
      } else if (this.rowData.rwmType == "RK04") {
        addRkmxTwo(datas).then((response) => {
          this.serachChildrened();
        });
      } else if (this.rowData.rwmType == "RK11") {
        addRkmxFive(datas).then((response) => {
          this.serachChildrened();
        });
      } else {
        addRkmxThree(datas).then((response) => {
          this.serachChildrened();
        });
      }
    },
    // 表单重置
    reset() {
      this.form = {
        rwmId: null,
        rwmDjbh: null,
        rwmRkrq: new Date(),
        rwmType: null,
        rwmCsdm: null,
        rwmCkdm: null,
        rwmShdh: null,
        rwmDesc: null,
        rwmTjflag: null,
        rwmNgdesc: null,
        rwmZtbz: null,
        rwmJyjg: null,
        rwmJlry: null,
        rwmJlrq: null,
        rwmJyry: null,
        rwmJyrq: null,
        rwmGzry: null,
        rwmGzrq: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.rwmMstrList = [];
      this.getList();
      this.openSearch = false;
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.daterangeRwmJlrq = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    // handleSelectionChange(selection) {
    //   this.ids = selection.map(item => item.rwmId)
    //   this.rwmDjbhs = selection.map(item => item.rwmDjbh)
    //   this.multiple = !selection.length
    //   this.getRwdDetList(this.rwmDjbhs[this.rwmDjbhs.length-1]);
    // },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.updateView = false;
      this.open = true;
      this.title = "添加来料进货入库开单";
    },
    handlePut() {
      submitPomPod(this.rowData.rwmDjbh).then((response) => {
        this.msgSuccess("提交成功");
        this.getList();
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const rwmId = row.rwmId || this.ids;
      getPutStorageAdd(rwmId).then((response) => {
        this.form = response.data;
        this.updateView = this.rwdDetList.length > 0;
        this.open = true;
        this.title = "修改来料进货入库开单";
      });
    },
    handleSearch() {
      this.reset();
      this.title = "查询来料进货入库开单";
      this.openSearch = true;
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.rwmId != null) {
            updatePutStorageAdd(this.form).then((response) => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addPutStorageAdd(this.form).then((response) => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const rwmIds = row.rwmId || this.ids;
      this.$confirm(
        '是否确认删除来料进货入库开单编号为"' + rwmIds + '"的数据项?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          return delPutStorageAdd(rwmIds);
        })
        .then(() => {
          this.rwmMstrList = [];
          this.queryParams.pageNum = 1;
          this.getList();
          this.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    //删除入库统计
    handleDel(row) {
      this.$confirm("是否确认删除入库统计", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteByDjbhAndWldm(this.rowData.rwmDjbh, row.rwdWldm).then((res) => {
          if (res.code == 200) {
            this.msgSuccess("删除成功");
            this.clickRwm(this.rowData);
          }
        });
      });
    },
    handleDetailExport(a, b) {
      exportTable(a, b);
    },
    handleTotalExport(a, b) {
      exportTable(a, b);
    },
    //撤回开单
    handleBack() {
      if (this.backRwmDesc == null || this.backRwmDesc == "") {
        this.msgError("请输入撤回理由~");
        return;
      }
      const data = {
        rwmId: this.rowData.rwmId,
        rwmDesc: this.backRwmDesc,
        rwmZtbz: 1,
        rwmTjflag: 0,
      };
      updatePutStorageAdd(data).then((res) => {
        this.msgSuccess("更新成功~");
        this.queryParams.pageNum = 1;
        this.rwmMsrtList = [];
        this.getList();
        this.backRwmDesc = null;
        this.check_back = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
